<template>
  <a-card style="width: 100%">
    <a-form :form="form">
      <a-row>
        <a-col :md="8" :sm="12">
          <a-form-item
            :label="$t('key.kkyx')"
            :labelCol="{span: 7,offset: 1}"
            :wrapperCol="{span: 15, offset: 1}"
          >
            <a-select v-decorator="['kcyx',
              {
                rules: [{ required: true, message: '请选择开课院系!' }],
              }]" @change="yxChange" showSearch :filterOption="filterOption" :disabled="!!editId">
              <a-select-option v-for="i in selectMenu.yxList" :key="i.id" :value="i.dwh">{{ i.dwh+'-'+i.dwmc }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="12">
          <a-form-item
            :label="$t('key.kcmc')"
            :labelCol="{span: 7,offset: 1}"
            :wrapperCol="{span: 15, offset: 1}"
          >
            <a-select v-decorator="['kcdm',
              {
                rules: [{ required: true, message: '请选择课程!' }],
              }]" @change="kcChange" showSearch :filterOption="filterOption" :disabled="!!editId">
              <a-spin v-if="kcLoading" slot="notFoundContent" size="small"/>
              <a-select-option v-for="(i,index) in selectMenu.courseList" :key="index" :value="i.kch">{{ i.kch + '-' + i.kcmc }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="12">
          <a-form-item
            :label="$t('key.ksnj')"
            :labelCol="{span: 7,offset: 1}"
            :wrapperCol="{span: 15, offset: 1}"
          >
            <a-select v-decorator="['ksnj',
              {
                rules: [{ required: true, message: '请选择考试年级!' }],
              }]">
              <a-select-option v-for="i in TYPE0126" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="12">
          <a-form-item
            :label="$t('key.ksxn')"
            :labelCol="{span: 7,offset: 1}"
            :wrapperCol="{span: 15, offset: 1}"
          >
            <a-select v-decorator="['ksxn',
              {
                rules: [{ required: true, message: '请选择考试学年!' }],
              }]">
              <a-select-option v-for="i in TYPE0125" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="12">
          <a-form-item
            :label="$t('key.ksxq')"
            :labelCol="{span: 7,offset: 1}"
            :wrapperCol="{span: 15, offset: 1}"
          >
            <a-select v-decorator="['ksxq',
              {
                rules: [{ required: true, message: '请选择考试学期!' }],
              }]">
              <a-select-option v-for="i in TYPE0072" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="12">
          <a-form-item
            :label="$t('key.ksxz')"
            :labelCol="{span: 7,offset: 1}"
            :wrapperCol="{span: 15, offset: 1}"
          >
            <a-select v-decorator="['ksxz',
              {
                rules: [{ required: true, message: '请选择考试性质!' }],
              }]">
              <a-select-option v-for="i in TYPE0358" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="12">
          <a-form-item
            :label="$t('key.kslb')"
            :labelCol="{span: 7,offset: 1}"
            :wrapperCol="{span: 15, offset: 1}"
          >
            <a-select v-decorator="['kslb',
              {
                rules: [{ required: true, message: '请选择考试类别!' }],
              }]">
              <a-select-option v-for="i in TYPE0109" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="12">
          <a-form-item
            :label="$t('key.cjlx')"
            :labelCol="{span: 7,offset: 1}"
            :wrapperCol="{span: 15, offset: 1}"
          >
            <a-select v-decorator="['cjlx',
              {
                rules: [{ required: true, message: '请选择成绩类型!' }],
              }]">
              <a-select-option v-for="i in TYPE0328" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="12">
          <a-form-item
            :label="$t('key.ksrq')"
            :labelCol="{span: 7,offset: 1}"
            :wrapperCol="{span: 15, offset: 1}"
          >
            <a-date-picker v-decorator="['ksrq',
              {
                rules: [{ required: true, message: '请选择开始时间!' }],
              }]"/>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="12">
          <a-button style="margin-left: 50px;" type="primary" @click="startAdd">{{ $t('button.startRecordingResults') }}</a-button>
        </a-col>
      </a-row>
    </a-form>
    
    <add-modal
      ref="add"
      :visible="visible"
      :modelForm="form.getFieldsValue()"
      @cancel="visible = false"
    />
  </a-card>
</template>

<script>
import { mapState } from 'vuex'
import { DateToString } from '@/utils/common'
import addModal from './components/addModal'

export default {
  data () {
    return {
      form: this.$form.createForm(this),
      selectMenu: {},
      kcLoading: false,
      editId: null,
      visible: false
    }
  },
  components: {addModal},
  computed: {
    ...mapState({
      TYPE0125: state => state.app['TYPE0125'],
      TYPE0126: state => state.app['TYPE0126'],
      TYPE0072: state => state.app['TYPE0072'],
      TYPE0358: state => state.app['TYPE0358'],
      TYPE0109: state => state.app['TYPE0109'],
      TYPE0328: state => state.app['TYPE0328']
    })
  },
  activated(){
    this.$store.dispatch('app/sysInfo', true).then(data => {
              console.log(data)
              if ( +new Date() > +data.cjlrjssj  ||  +new Date() < +data.cjlrkssj) {
                this.$confirm({
                  title: '当前不在成绩录入时间范围，无法进行操作',
                  centered: true,
                  okText: '确认',
                  cancelText: '返回',
                  onOk: () => {
                    this.$router.back()
                  },
                  onCancel: () => {
                    this.$router.back()
                  }
                })
              }
            })
  },
  created () {
    this.$store.dispatch('app/setDictionary', 'TYPE0125')
    this.$store.dispatch('app/setDictionary', 'TYPE0126')
    this.$store.dispatch('app/setDictionary', 'TYPE0072')
    this.$store.dispatch('app/setDictionary', 'TYPE0358')
    this.$store.dispatch('app/setDictionary', 'TYPE0109')
    this.$store.dispatch('app/setDictionary', 'TYPE0328')
    this.initSelectMenu()
  },
  methods: {
    initSelectMenu () {
      let allRequest = [
        this.$api.base.collegeAll()
      ]
      Promise.all(allRequest).then(res => {
        this.selectMenu = {
          yxList: res[0].data
        }
      })
    },
    filterOption (value, op) {
      return op.componentOptions.children[0].text.indexOf(value) !== -1
    },
    yxChange (code) {
      this.form.setFieldsValue({kcbm: ''})
      this.$set(this.selectMenu, 'courseList', [])
      if (code) {
        this.kcLoading = true
        this.$api.cultivate.courseAll({kcssyxm: code}).then(res => {
          this.$set(this.selectMenu, 'courseList', res.data)
        }).finally(() => {
          this.kcLoading = false
        })
      } else {
        this.$set(this.selectMenu, 'courseList', [])
      }
    },
    kcChange (kch) {
      let kc = this.selectMenu.courseList.find(kc => {
        return kc.kch === kch
      })
      this.form.setFieldsValue({
        xf: kc.xf
      })
    },
    startAdd () {
      this.form.validateFields((err, values) => {
        if (err) {
          return
        }
        DateToString(values)
        this.$api.cultivate.kccjDrcjlrCheck(values).then(res => {
          // console.log(res)
          this.visible = true
          this.$refs.add.cjksxsmdList = typeof res.data === 'object' ? res.data : []
          this.$refs.add.params = values
        })
      })
    }
  }
}
</script>

<style>

</style>
